<template>
	<view :style="{ height: deviceHeight + 'px' }" class="content">
		<van-nav-bar title="质量整改" placeholder fixed left-arrow @click-left="onClickLeft"></van-nav-bar>
		<van-search v-model="value" placeholder="请输入整改编号、检查部位或问题" />
		<van-tabs v-model:active="active" animated>
			<van-tab v-for="e in filteredArr" :title="e.title">
				<scroll-view scroll-y="true" class="scroll">
					<ul v-for="(item,index) in e.data" :key='index' class="card" @click="checkOrRatify(item)">
						<li class='lis'>整改编号<text>{{item.rectificationCode}}</text></li>
						<li class='lis'>检查部位<text>{{item.qualityPart}}</text></li>
						<li class='lis'>问题描述<text>{{item.problemDescription}}</text></li>
						<li class='lis'>整改意见<text>{{item.suggestion}}</text></li>
						<li class='lis'>整改期限<text>{{item.deadline}}</text></li>
						<view :class="['state', getStateClass(item.flowStatus)]">{{item.flowStatus}}</view>
					</ul>
				</scroll-view>
			</van-tab>
		</van-tabs>
	</view>
</template>

<script setup lang='ts'>
	import {ref,reactive,computed,} from 'vue';
	import {getTask,} from '@/apis/qualityRectification.js';
	import {onShow} from '@dcloudio/uni-app'
	const value = ref('')
	const projectId = uni.getStorageSync("projectInfo").id
	const deviceHeight = uni.getStorageSync('screenHeight')
	const active = ref(0);

	//是否拥有审批权限

	const approval=uni.getStorageSync('userRoleInProject').perms['mobile:rectification:review']
	const arr = reactive([{title: '待处理',data: []}, {title: '已处理',data: []}]);

	onShow(() => {
		arr.forEach(item => {item.data = []});
		getTask(projectId).then(res => {
			arr[0].data.push(...res.data.todo)
			arr[1].data.push(...res.data.done)
		})
	})

	// 用于根据搜索关键词筛选列表
	const filteredArr = computed(() => {
		if (!value.value) {
			return arr;
		}

		return arr.map(e => {
			return {
				title: e.title,
				data: e.data.filter(item =>
					item.rectificationCode.toString().includes(value.value) ||
					item.qualityPart.includes(value.value) ||
					item.problemDescription.includes(value.value)
				)
			};
		});
	});

	//审批或者查看当前项信息
	const checkOrRatify = (item) => {
		uni.navigateTo({
			url: `/pages/qualityRectification/qualityRectificationMsg?id=${item.id}&flowStatus=${item.flowStatus}&approval=${approval}&active=${active.value}`
		})
	}

	//返回到首页
	const onClickLeft = () => {
		uni.switchTab({
			url: '/pages/index/index'
		})
	}

	//动态绑定样式
	const getStateClass = (state) => {
		switch (state) {
			case '复查不通过':
				return 'state-fail';
			case '复查通过':
				return 'state-pass';
			case '整改中':
				return 'state-progress';
			case '待复查':
				return 'state-pending';
			default:
				return '';
		}
	};
</script>

<style lang="scss" scoped>
	.content {
		background-color: #fafafa;

		.scroll {
			width: 100%;
			box-sizing: border-box;
			height: 100%;

			.card {
				width: 95%;
				margin: 10px auto;
				position: relative;
				margin-bottom: 20rpx;
				height: 180px;
				border-radius: 10rpx;
				display: flex;
				background-color: #ffffff;
				flex-direction: column;

				.lis {
					display: flex;
					flex: 1;
					align-items: center;
					text-indent: 20rpx;
					font-size: 14px;
					color: #7f7f7f;

					text {
						text-indent: 40rpx;
					}
				}

				.state {
					position: absolute;
					padding: 0 20rpx;
					text-align: center;
					line-height: 30px;
					border: 1px solid #ff6937;
					right: 10px;
					top: 10px;
					color: #ff6937;

					&.state-fail {
						color: #ff4d4f;
						border-color: #ff4d4f;
					}

					&.state-pass {
						color: #3086ff;
						border-color: #3086ff;
					}

					&.state-progress {
						color: #faad14;
						border-color: #faad14;
					}

					&.state-pending {
						color: #d9d9d9;
						border-color: #d9d9d9;
					}
				}
			}
		}
	}
</style>